document.addEventListener('DOMContentLoaded', () => {
    let linkCss = document.createElement('link');
    linkCss.setAttribute('rel', 'stylesheet');
    linkCss.setAttribute('type', 'text/css');
    linkCss.setAttribute('href', 'xf-PictureBlackbox.css');
    document.head.appendChild(linkCss);

    const domId = document.querySelectorAll('#xf-PicBlackbox');
    const domClass = Array.from(document.querySelectorAll('.xf-PicBlackbox'));
    const PicBlackbox = [...domId, ...domClass];
    
    const eleImg = document.querySelectorAll('img[data-src]');

    if (eleImg.length) {
        const callback = entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const imgDom = entry.target;
                    const data_src = imgDom.getAttribute('data-src');
                    imgDom.setAttribute('src', data_src);
                    imgDom.removeAttribute('data-src');
                    imgDom.classList.add('xf-showImg');
                    observer.unobserve(imgDom);
                }
            });
        };

        const observer = new IntersectionObserver(callback);

        eleImg.forEach(images => {
            observer.observe(images);
        });
    }

    PicBlackbox.forEach(dom => {
        dom.addEventListener('click', function (e) {
            const dataPopup = this.getAttribute('data-popup');
            if (!this.getAttribute('data-pic')) if (dataPopup !== null) return;

            e.preventDefault();

            let mainBoxNum = document.querySelectorAll('.xf-mainBox').length;

            if (mainBoxNum) {
                alert('每次只能创建一次dom元素啊亲~');
                return false;
            }

            const picLink = this.getAttribute('data-pic') || this.src;
            const zdyText = this.getAttribute('data-text');

            if (picLink === null || picLink === '') {
                alert('检测到你标签里未添加data-pic属性或没有图片路径');
                return false;
            }

            const xfMainBox = createElementWithClass('div', 'xf-mainBox');
            const insideDiv = createElementWithClass('div', 'xf-fadeOutDiv');
            const masking = createElementWithClass('div', 'xf-masking');
            const newImg = createElementWithClass('img', 'xf-fadeOutPic');
            const newP = createElementWithClass('p', 'xf-fadeOutText');
            const delDom = createElementWithClass('i', 'xf-delDom');

            delDom.textContent = '×';
            newImg.src = picLink;
            newP.textContent = zdyText;

            const children = [newImg, delDom];
            if (zdyText !== null) {
                newImg.alt = zdyText;
                children.splice(1, 0, newP);
            }
            insideDiv.append(...children);

            xfMainBox.append(insideDiv, masking);
            document.body.appendChild(xfMainBox);

            const pic = document.querySelector('.xf-fadeOutPic');
            const fadeOutDiv = document.querySelector('.xf-fadeOutDiv');
            const img = new Image();
            img.onload = () => {
                const w = img.width;
                const h = img.height;
                if (w > h) {
                    pic.style.width = `100%`;
                    fadeOutDiv.classList.add('Div-w');
                } else if (w < h) {
                    pic.style.height = `100%`;
                    fadeOutDiv.classList.add('Div-h');
                } else {
                    pic.style.width = `100%`;
                    pic.style.height = `100%`;
                    fadeOutDiv.classList.add('Div-center');
                }
            };
            img.src = picLink;

            const mainBox = document.querySelector('.xf-mainBox');
            mainBox.classList.add('xf-fadeIn');

            const xfTextCopy = document.querySelector('.xf-fadeOutText');
            if (xfTextCopy) {
                let alertBox = null;

                xfTextCopy.addEventListener('click', async () => {
                    const text = xfTextCopy.textContent;

                    function showSimpleAlert(text) {
                        alertBox.textContent = text;
                    }

                    if (alertBox) {
                        showSimpleAlert(text);
                    } else {
                        alertBox = document.createElement('div');
                        alertBox.classList.add('xf-simpleAlert');

                        try {
                            await navigator.clipboard.writeText(text);
                            showSimpleAlert('复制成功');
                        } catch (err) {
                            alert('复制失败');
                        }

                        document.body.appendChild(alertBox);

                        setTimeout(() => {
                            alertBox.style.left = 0;
                        }, 50);
                        setTimeout(() => {
                            alertBox.style.left = '-100%';
                            setTimeout(() => {
                                alertBox.remove();
                                alertBox = null;
                            }, 500);
                        }, 3050);
                    }
                });
            }

            const xfImgDel = document.querySelector('.xf-masking');
            const xfdelDom = document.querySelector('.xf-delDom');

            xfImgDel.addEventListener('click', removeElement);
            xfdelDom.addEventListener('click', removeElement);

            function removeElement() {
                const { classList } = mainBox;
                classList.remove('xf-fadeIn');
                classList.add('xf-fadeOut');
                setTimeout(() => mainBox.remove(), 350);
            }
        });
        return false;
    });

    function createElementWithClass(tagName, className) {
        const ele = document.createElement(tagName);
        if (className) {
            ele.classList.add(className);
        }
        return ele;
    }
});